<template>
  <div id="detail">
    <title-bar>
      <div class="back" @click="backClick">
        <img src="../../assets/img/back.png" alt="" />
      </div>
    </title-bar>
    <detail-content>
      <detail-item>
        <div class="detail-title">
          <span>{{itemInfo.title}}</span>
        </div>
        <div class="detail-date">
          <span>{{itemInfo.date}}</span>
        </div>
        <div class="detail-content" v-html="itemInfo.content">
        </div>
      </detail-item>
    </detail-content>
  </div>
</template>

<script>
import {getDetail} from '../../network/detail'
import TitleBar from '../../components/titleBar/TitleBar.vue'
import DetailContent from './detailChild/DetailContent.vue'
import DetailItem from './detailChild/DetailItem.vue'
  export default {
    props:{

    },
    data() {
      return {
        // detail:null
        
        itemInfo:{}
      }
    },
    components:{
      TitleBar,
      DetailContent,
      DetailItem
    },
    created(){
      this.getDetail()
      // this.$nextTick(this.getDetail)
    },
    // watch:{
    //    beforeRouteEnter (to, from, next) {
    //      next()
    //    }
    // },
    methods:{
      getDetail(){
        getDetail().then(res=>{
          console.log(res)
          let itemDet = res
          let iid = this.$route.path.substring(
      // 获取路径中最后一个字符l的索引 永远都是6 而6+2=8 截取得到最后携带的iid的数字
            this.$route.path.lastIndexOf('l') + 2
          )
          this.itemInfo = itemDet.find(item=>{
            return item.id == iid
          })
          console.log(this.itemInfo)
          this.itemInfo.content = this.itemInfo.content.replace(
            /<br\/>/g , 
            "<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
        })
      },
      
      backClick() {
      this.$router.go(-1);
    },
      
    }
  }
</script>

<style lang="less" scoped>
#detail{
  margin-top: 60px;
}
.back {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 2px;
}
.title {
  text-align: center;
  padding: 20px 0 20px;
  font-size: 22px;
}
.title span {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.date {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}
.content {
  padding: 0 10px 40px;
  text-indent: 2em;
  line-height: 30px;
}
</style>